<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { Search, Delete, Download, Document, Check, User, List, CaretTop } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 操作日志数据
const logs = ref([
  { 
    id: 1, 
    type: '素材上传', 
    operator: '赵明杰', 
    content: '上传了5张高品质风景图片素材', 
    time: '2023-11-20 15:30:21',
    ip: '192.168.1.100',
    status: 'success'
  },
  { 
    id: 2, 
    type: '素材删除', 
    operator: '林思敏', 
    content: '删除了ID为SP202311001的素材', 
    time: '2023-11-20 14:25:16',
    ip: '192.168.1.101',
    status: 'danger'
  },
  { 
    id: 3, 
    type: '模型调用', 
    operator: '张云帆', 
    content: '调用了图像生成模型，生成了3张图片', 
    time: '2023-11-20 11:42:53',
    ip: '192.168.1.102',
    status: 'warning'
  },
  { 
    id: 4, 
    type: '用户登录', 
    operator: '李小明', 
    content: '用户登录系统', 
    time: '2023-11-20 10:15:30',
    ip: '192.168.1.103',
    status: 'info'
  },
  { 
    id: 5, 
    type: '素材编辑', 
    operator: '王大力', 
    content: '编辑了ID为SP202311002的素材标签', 
    time: '2023-11-20 09:30:45',
    ip: '192.168.1.104',
    status: 'primary'
  }
])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 125
})

// 搜索关键词
const searchKeyword = ref('')

// 日期范围
const dateRange = ref([])

// 操作类型选择
const operationType = ref('')
const operationTypes = [
  { label: '全部类型', value: '' },
  { label: '素材上传', value: 'upload' },
  { label: '素材删除', value: 'delete' },
  { label: '素材编辑', value: 'edit' },
  { label: '模型调用', value: 'model' },
  { label: '用户登录', value: 'login' }
]

// 处理页码变化
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  // 这里可以添加获取对应页数据的逻辑
}

// 处理搜索
const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
  console.log('日期范围:', dateRange.value)
  console.log('操作类型:', operationType.value)
  // 这里可以添加搜索逻辑
}

// 处理导出日志
const handleExportLogs = () => {
  console.log('导出日志')
  // 这里可以添加导出日志的逻辑
}

// 处理清空日志
const handleClearLogs = () => {
  console.log('清空日志')
  // 这里可以添加清空日志的逻辑
}

// 获取操作类型对应的标签类型
const getTagType = (status: string) => {
  switch (status) {
    case 'success':
      return 'success'
    case 'danger':
      return 'danger'
    case 'warning':
      return 'warning'
    case 'info':
      return 'info'
    default:
      return 'primary'
  }
}

// 图表配置
const productionTrendOptions = {
  xAxis: {
    type: 'category',
    data: ['11-14', '11-15', '11-16', '11-17', '11-18', '11-19', '11-20'],
    axisLine: {
      lineStyle: {
        color: '#E0E6F1'
      }
    },
    axisLabel: {
      color: '#909399'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#EBEEF5'
      }
    },
    axisLabel: {
      color: '#909399'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '10%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [850, 900, 900, 950, 1250, 1300, 1250],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        color: '#409EFF',
        width: 3
      },
      itemStyle: {
        color: '#409EFF',
        borderColor: '#fff',
        borderWidth: 2
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(64, 158, 255, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(64, 158, 255, 0.1)'
            }
          ]
        }
      }
    }
  ]
}

const modelSuccessRateOptions = {
  xAxis: {
    type: 'category',
    data: ['11-14', '11-15', '11-16', '11-17', '11-18', '11-19', '11-20'],
    axisLine: {
      lineStyle: {
        color: '#E0E6F1'
      }
    },
    axisLabel: {
      color: '#909399'
    }
  },
  yAxis: {
    type: 'value',
    min: 90,
    max: 100,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#EBEEF5'
      }
    },
    axisLabel: {
      color: '#909399'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '10%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [96, 97, 97.5, 98, 98.2, 98.5, 98.6],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        color: '#67C23A',
        width: 3
      },
      itemStyle: {
        color: '#67C23A',
        borderColor: '#fff',
        borderWidth: 2
      }
    }
  ]
}

// 初始化图表
onMounted(() => {
  nextTick(() => {
    // 初始化生成量趋势图表
    const productionTrendChart = echarts.init(document.getElementById('productionTrend'))
    productionTrendChart.setOption(productionTrendOptions)
    
    // 初始化模型成功率图表
    const modelSuccessRateChart = echarts.init(document.getElementById('modelSuccessRate'))
    modelSuccessRateChart.setOption(modelSuccessRateOptions)
    
    // 窗口大小变化时重绘图表
    window.addEventListener('resize', () => {
      productionTrendChart.resize()
      modelSuccessRateChart.resize()
    })
  })
})
</script>

<template>
  <div class="operation-log-container">
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>今日生成量</h3>
            <div class="stat-value">1,284</div>
            <div class="stat-trend trend-up">
              <el-icon><CaretTop /></el-icon>
              较昨日增长 12.5%
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(64, 158, 255, 0.1)">
            <el-icon style="color: #409EFF"><Document /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>模型成功率</h3>
            <div class="stat-value">98.6%</div>
            <div class="stat-trend trend-up">
              <el-icon><CaretTop /></el-icon>
              较上周提升 0.8%
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(103, 194, 58, 0.1)">
            <el-icon style="color: #67C23A"><Check /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>活跃用户数</h3>
            <div class="stat-value">3,721</div>
            <div class="stat-trend trend-up">
              <el-icon><CaretTop /></el-icon>
              较昨日增长 5.2%
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(64, 158, 255, 0.1)">
            <el-icon style="color: #409EFF"><User /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>素材库总量</h3>
            <div class="stat-value">42,891</div>
            <div class="stat-trend">
              更新于 10 分钟前
            </div>
          </div>
          <div class="stat-icon" style="background-color: rgba(144, 147, 153, 0.1)">
            <el-icon style="color: #909399"><List /></el-icon>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 操作日志 -->
    <el-card class="log-overview" shadow="hover">
      <template #header>
        <div class="card-header">
          <h3>操作日志</h3>
        </div>
      </template>
      
      <div class="search-section">
        <div class="search-form">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索关键词"
            class="search-input"
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            class="date-picker"
          />
          
          <el-select
            v-model="operationType"
            placeholder="操作类型"
            clearable
            class="type-select"
          >
            <el-option
              v-for="item in operationTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon> 搜索
          </el-button>
        </div>
        
        <div class="action-buttons">
          <el-button @click="handleExportLogs">
            <el-icon><Download /></el-icon> 导出日志
          </el-button>
          <el-button type="danger" @click="handleClearLogs">
            <el-icon><Delete /></el-icon> 清空日志
          </el-button>
        </div>
      </div>

      <el-table :data="logs" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column label="操作类型" width="120">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.status)" size="small">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" width="120" />
        <el-table-column prop="content" label="操作内容" />
        <el-table-column prop="ip" label="IP地址" width="140" />
        <el-table-column prop="time" label="操作时间" width="180" />
      </el-table>

      <div class="pagination-container">
        <span class="total-count">共 {{ pagination.total }} 条记录</span>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.currentPage"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 图表区域 -->
    <div class="chart-container">
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>生成量趋势</h3>
          </div>
        </template>
        <div class="chart" id="productionTrend"></div>
      </el-card>

      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>模型成功率</h3>
          </div>
        </template>
        <div class="chart" id="modelSuccessRate"></div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.operation-log-container {
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .stat-card {
      border-radius: 8px;
      
      .stat-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .stat-info {
          h3 {
            font-size: 14px;
            color: #909399;
            margin: 0 0 10px 0;
            font-weight: normal;
          }
          
          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
          }
          
          .stat-trend {
            font-size: 12px;
            color: #909399;
            display: flex;
            align-items: center;
            
            &.trend-up {
              color: #67C23A;
            }
            
            .el-icon {
              margin-right: 4px;
            }
          }
        }
        
        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .el-icon {
            font-size: 24px;
          }
        }
      }
    }
  }

  .log-overview {
    margin-bottom: 20px;
    border-radius: 8px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h3 {
        font-size: 16px;
        margin: 0;
        font-weight: 600;
      }
    }
    
    .search-section {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px;
      
      .search-form {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        
        .search-input {
          width: 200px;
        }
        
        .date-picker {
          width: 320px;
        }
        
        .type-select {
          width: 150px;
        }
      }
      
      .action-buttons {
        display: flex;
        gap: 10px;
      }
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .total-count {
        color: #909399;
        font-size: 14px;
      }
    }
  }

  .chart-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    
    .chart-card {
      border-radius: 8px;
      
      .card-header {
        h3 {
          font-size: 16px;
          margin: 0;
          font-weight: 600;
        }
      }
      
      .chart {
        height: 300px;
      }
    }
  }
}
</style>